@import "../../../css/global";

.main {
  .video-list {
    margin: .4rem 0;
    & > li {
      margin: .32rem;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 0.01rem 0.02rem 0 rgba(0, 0, 0, 0.18), 0 0.01rem 0.02rem 0 rgba(0, 0, 0, 0.04), 0 0.01rem 0.06rem 0 rgba(0, 0, 0, 0.04);
      border-radius: .16rem;

      .title {
        width: 6.38rem;
        max-height: .34rem;
        @include ellipsis(2);
        line-height: .34rem;
        margin: .24rem .24rem .16rem .24rem;
        font-size: .34rem;
        color: rgba(34, 34, 34, 1);
      }
      .img {
        width: 100%;
        height: 3.52rem;
        margin-top: .2rem;
        .video {
          width: 1.04rem;
          height: 1.04rem;
          background: url("../../../img/btn_list_play.png") center no-repeat;
          background-size: contain;
        }
      }
      .date {
        height: .26rem;
        margin-left: .24rem;
        font-size: .26rem;
        color: rgba(140, 140, 140, 1);
        line-height: .26rem;
      }
      .icon {
        width: .36rem;
        height: .36rem;
        background: url("../../../img/ic_list_eye.png") center no-repeat;
        background-size: contain;
      }
      .click {
        height: .26rem;
        margin: 0 .24rem 0 .12rem;
        font-size: .26rem;
        color: rgba(140, 140, 140, 1);
        line-height: .26rem;
      }
      .collection {
        width: 100%;
        min-height: .88rem;
        .collect {
          width: .56rem;
          min-height: .56rem;
          margin-right: .16rem;
          background: url("../../../img/ic_list_collect.png") center no-repeat;
          background-size: contain;
          .favoured{
            background: url("../../../img/ic_list_collect_solid.png") center no-repeat;
            background-size: contain;
          }
        }
        span {
          width: 4.74rem;
          min-height: .30rem;
          margin-left: .24rem;
          font-size: .30rem;
          color: rgba(153, 153, 153, 1);
          line-height: .30rem;
        }
      }
    }
  }
}
